import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xlsk/utils/dimension.dart';

class Dropdown extends StatefulWidget {
  bool keepShow = false;
  num height = 0;
  bool showContent = false;
  bool showOffstage = true; // true为隐藏
  double opacity = 0;
  double contentHeight = 0;
  List<Widget> children;
  num maxHeight = 0;
  num textHeight;
  Color backgroundColor;
  var finish;
  var resert;


  Dropdown({
    Key ?key,
    this.keepShow = true,
    required this.contentHeight,
    this.maxHeight = 230,
    required this.children,
    required this.finish,
    required this.resert,
    this.textHeight = 48,
    this.backgroundColor = Colors.white,
  }) : super(key: key);



  @override
  State<StatefulWidget> createState() {
    return _dropdownState();
  }
}

class _dropdownState extends State<Dropdown> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if(widget.keepShow){ //在渲染中保持显示
      setState(() {
        widget.showOffstage = false;
        widget.height = widget.maxHeight;
        widget.opacity = 0.3;
        widget.showContent = true;
      });
    }
    return Stack(
      children: [
        Container(
          width: Dimension(context).toVw(100),
          height: Dimension(context).toPx(48),
          padding: EdgeInsets.fromLTRB(0, 0, Dimension(context).toPx(8), 0),
          decoration: BoxDecoration(
              color: widget.backgroundColor
          ),
        ),
        Positioned(
          child: Container(
            child:GestureDetector(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('筛选',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14))),
                  Image.asset('assets/images/student-filter.png',width: Dimension(context).toPx(16),height: Dimension(context).toPx(16)),
                ],
              ),
              onTap: (){
                if(widget.showContent){
                  Timer(Duration(milliseconds: 300),(){
                    setState(() {
                      widget.showOffstage = true;
                    });
                  });
                }else{
                  setState(() {
                    widget.showOffstage = false;
                  });
                }
                setState(() {
                  widget.height = widget.showContent?0:widget.maxHeight;
                  widget.opacity = widget.showContent?0:0.3;
                  widget.keepShow = !widget.keepShow;
                  widget.showContent = !widget.showContent;
                });
              },
              behavior: HitTestBehavior.opaque,
            ),
            width: Dimension(context).toPx(50),
            height: Dimension(context).toPx(widget.textHeight),
          ),
          top: 0,
          right: Dimension(context).toPx(18),
        ),
        GestureDetector(
          child: Offstage(
            offstage: widget.showOffstage,
            child: AnimatedContainer(
              decoration: BoxDecoration(
                color: Color.fromRGBO(0, 0, 0, widget.opacity),
                // color: Colors.red
              ),
              width: Dimension(context).toVw(100),
              height: widget.contentHeight,
              duration: Duration(milliseconds: 300),
              margin: EdgeInsets.only(top: Dimension(context).toPx(48)),
            ),
          ),
          onTap: (){
            closeContent();
          },
        ),
        Positioned(
          left: 0,
          top: Dimension(context).toPx(48),
          child: Offstage(
            offstage: widget.showOffstage,
            child: Stack(
              children: [
                AnimatedContainer(
                  decoration: BoxDecoration(
                      color: Colors.white
                  ),
                  constraints: BoxConstraints(
                      minHeight: Dimension(context).toPx(widget.height)
                  ),
                  width: Dimension(context).toVw(100),
                  duration: Duration(milliseconds: 300),
                  curve: Curves.fastOutSlowIn,
                ),
                Positioned(
                  top: 0,
                  left: 0,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: ListView(
                          children: widget.children,
                        ),
                        width: Dimension(context).toVw(100),
                        height: Dimension(context).toPx(widget.maxHeight - 50 - 16),
                        margin: EdgeInsets.only(bottom: Dimension(context).toPx(16)),
                        padding: EdgeInsets.all(Dimension(context).toPx(16)),
                      ),
                      Container(
                        width: Dimension(context).toVw(100),
                        height: Dimension(context).toPx(50),
                        child: Row(
                          children: [
                            GestureDetector(
                              onTap: (){
                                widget.resert();
                              },
                              child: Container(
                                width: Dimension(context).toVw(50),
                                height: Dimension(context).toPx(50),
                                decoration: BoxDecoration(
                                    border: Border(
                                        top: BorderSide(
                                            width: Dimension(context).toPx(1),
                                            color: Color(0xffebedf0)
                                        )
                                    )
                                ),
                                child: Center(
                                  child: Text('清空',style: TextStyle(fontSize: Dimension(context).toPx(16),color: Color(0xff1f2329))),
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: (){
                                closeContent();
                                Timer(Duration(milliseconds: 300),(){
                                  widget.finish();
                                });
                              },
                              child: Container(
                                width: Dimension(context).toVw(50),
                                height: Dimension(context).toPx(50),
                                color: Color(0xff1661FF),
                                child: Center(
                                  child: Text('完成',style: TextStyle(fontSize: Dimension(context).toPx(16),color: Colors.white)),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  closeContent(){
    Timer(Duration(milliseconds: 300),(){
      setState(() {
        widget.showOffstage = true;
      });
    });
    setState(() {
      widget.height = 0;
      widget.opacity = 0;
      widget.keepShow = false;
      widget.showContent = false;
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}
